<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<title>jNathanson.com | the interwebs home of josh nathanson</title> 
<script src="pages/jquery/jquery-1.3.1.min.js" type="text/javascript"></script> 
<script src="js/mainscripts.js" type="text/javascript"></script> 
<link href="style.css" rel="stylesheet" type="text/css"> 
</head> 
 
<body bgcolor="#cccccc"> 
<div id="header"> 
<a href="http://www.jnathanson.com">jnathanson.com</a> 
</div> 
 
<div id="menu"> 
	<div class="menulink"> 
		<a href="http://www.jnathanson.com/index.cfm?page=jquery/plugins">jQuery Plugins</a> 
	</div> 
	<div class="menulink"> 
		<a href="http://www.jnathanson.com/index.cfm?page=about">About</a> 
	</div> 
	<div class="menulink"> 
		<a href="http://www.jnathanson.com/index.cfm?page=contact">Contact</a> 
	</div> 
	<div class="menulink"> 
		<a href="http://www.jnathanson.com/index.cfm?page=resume">Resume</a> 
	</div> 
</div> 
 
 
<div id="content"> 
<link rel="stylesheet" href="pages/jquery/clockpick/1.2.5/clockpick.1.2.5.css" type="text/css"> 
 
<script type="text/javascript" src="pages/jquery/bgiframe_2.1.1/jquery.bgiframe.pack.js"></script> 
<script type="text/javascript" src="pages/jquery/clockpick/1.2.5/jquery.clockpick.1.2.5.js"></script> 
 
<script type="text/javascript"> 
$(document).ready(function() {
 
	function cback() {
		this.after("<div id='cbox' />");
		$("#cbox")
		.text('Callback fired!')
		.addClass('red')
		.fadeIn(100)
		.fadeOut(1500);
	}
			
	$("select").not("#test").change(function() {
		binder();
	});
	
	function binder() {
		var opts = {};
		$("select").not("#test").each(function() {
			if ($(this).attr("id") != 'event' && $(this).attr("id") != 'layout') {
				opts[$(this).attr("id")] = eval($(this).val());
			}
			else {
				opts[$(this).attr("id")] = $(this).val();
			}
		});	
		//console.log(opts);
		$("#clockpick1").unbind().unbind( "keydown" ).clockpick(opts);
		
		opts.valuefield = 'timefield1';
		$("#clockpick2").unbind().clockpick(opts, cback);
		
		opts.valuefield = 'timefield2';
		opts.useBgiframe = true;
		$("#clockpick3").unbind().clockpick(opts, cback);
	}
	
	binder();
	
});
 
</script> 
 
<h1>ClockPick</h1> 
<p>A jQuery timepicker plugin</p> 
<h3><a href="#demo">Demo</a> | <a href="#download">Download</a> | <a href="#config">Configuration</a> | <a href="#history">History</a> | <a href="#contact">Contact</a></h3> 
<a name="demo"></a> 
<div class="thickline"></div> 
<h2>Demo</h2> 
<table width="760" border="0" cellpadding="3" cellspacing="1"> 
	<tr> 
		<td valign="top"><table border="0" cellspacing="1" cellpadding="0"> 
        	<tr> 
        		<td class="big">Enter time:</td> 
        		<td><input name="clockpick1" type="text" size="8" id="clockpick1"></td> 
        		<td>&nbsp;</td> 
        		</tr> 
        	</table> 
		    Click on the field - &quot;same field&quot; example<br> 
		    Code:<br> 
		    $(&quot;#clockpick1&quot;).clockpick();<br> 
		    <br> 
		    <br> 
		    <table border="0" cellspacing="1" cellpadding="0"> 
        	<tr> 
        		<td class="big">Enter time:</td> 
        		<td><input name="timefield1" type="text" id="timefield1" size="8"></td> 
        		<td><img src="pages/jquery/clockpick/clock.gif" width="20" height="20" id="clockpick2"></td> 
        		<td>&nbsp;</td> 
        		</tr> 
        	</table>		
			<div id="cback"> </div> 
		    <p>Click on the clock -- &quot;other field&quot; example, with callback <br> 
		    	Code:<br> 
		    	$(&quot;#clockpick2&quot;).clockpick(<br> 
		    	{ valuefield: 'timefield1' },<br> 
	    	cback);	    	</p> 
		    <p class="big">USING BGIFRAME FOR IE6</p> 
		   <select name="test" id="test"> 
                	<option value="hello">hello hello hello hello hello hello</option> 
           	</select><br> 
 <table border="0" cellspacing="1" cellpadding="0"> 
            	<tr> 
            		<td class="big">Enter time:</td> 
            		<td><input name="timefield2" type="text" id="timefield2" size="8"></td> 
            		<td><img src="pages/jquery/clockpick/clock.gif" width="20" height="20" id="clockpick3"></td> 
            		<td>&nbsp;</td> 
           		</tr> 
           	</table> 
		    <br> 
		    	<br> 
		    	Code:<br> 
$(&quot;#clockpick2&quot;).clockpick(<br> 
{ valuefield: 'timefield2',<br> 
useBgiframe: true 
},<br> 
	    		cback); <br> 
			</p> 
		    <p><br> 
	    	</p> 
		</td> 
		<td valign="top"> 
			    <p>To try different configuration options, set the options below, then click again on field or clock.</p> 
			    <table border="0" cellspacing="1" cellpadding="3"> 
        		<tr> 
        			<td bgcolor="#CCCCCC">&nbsp;</td> 
        			<td bgcolor="#CCCCCC"><strong>Param</strong></td> 
        			<td bgcolor="#CCCCCC"><strong>Type</strong></td> 
        			<td bgcolor="#CCCCCC"><strong>Default</strong></td> 
        			<td bgcolor="#CCCCCC"><strong>Try it!</strong></td> 
        			</tr> 
        		<tr> 
        			<td rowspan="11" valign="top" bgcolor="#cccccc">Argument 1 &quot;options&quot; (object) </td> 
        			<td bgcolor="#eeeeee" class="red">starthour</td> 
        			<td bgcolor="#eeeeee">int</td> 
        			<td bgcolor="#eeeeee">8</td> 
        			<td bgcolor="#eeeeee"><select name="starthour" id="starthour"> 
        					
        						<option value="0" >0</option> 
        						
        						<option value="1" >1</option> 
        						
        						<option value="2" >2</option> 
        						
        						<option value="3" >3</option> 
        						
        						<option value="4" >4</option> 
        						
        						<option value="5" >5</option> 
        						
        						<option value="6" >6</option> 
        						
        						<option value="7" >7</option> 
        						
        						<option value="8" selected>8</option> 
        						
        						<option value="9" >9</option> 
        						
        						<option value="10" >10</option> 
        						
        						<option value="11" >11</option> 
        						
        						<option value="12" >12</option> 
        						
        						<option value="13" >13</option> 
        						
        						<option value="14" >14</option> 
        						
        						<option value="15" >15</option> 
        						
        						<option value="16" >16</option> 
        						
        						<option value="17" >17</option> 
        						
        						<option value="18" >18</option> 
        						
        						<option value="19" >19</option> 
        						
        						<option value="20" >20</option> 
        						
        						<option value="21" >21</option> 
        						
        						<option value="22" >22</option> 
        						
        						<option value="23" >23</option> 
        						
        					</select></td> 
        			</tr> 
        		<tr> 
        			<td class="red">endhour</td> 
        			<td>int</td> 
        			<td>18</td> 
        			<td><select name="endhour" id="endhour"> 
        					
        						<option value="0" >0</option> 
        						
        						<option value="1" >1</option> 
        						
        						<option value="2" >2</option> 
        						
        						<option value="3" >3</option> 
        						
        						<option value="4" >4</option> 
        						
        						<option value="5" >5</option> 
        						
        						<option value="6" >6</option> 
        						
        						<option value="7" >7</option> 
        						
        						<option value="8" >8</option> 
        						
        						<option value="9" >9</option> 
        						
        						<option value="10" >10</option> 
        						
        						<option value="11" >11</option> 
        						
        						<option value="12" >12</option> 
        						
        						<option value="13" >13</option> 
        						
        						<option value="14" >14</option> 
        						
        						<option value="15" >15</option> 
        						
        						<option value="16" >16</option> 
        						
        						<option value="17" >17</option> 
        						
        						<option value="18" selected>18</option> 
        						
        						<option value="19" >19</option> 
        						
        						<option value="20" >20</option> 
        						
        						<option value="21" >21</option> 
        						
        						<option value="22" >22</option> 
        						
        						<option value="23" >23</option> 
        						
        					</select></td> 
        			</tr> 
        		<tr> 
        			<td bgcolor="#eeeeee" class="red">showminutes</td> 
        			<td bgcolor="#eeeeee">boolean</td> 
        			<td bgcolor="#eeeeee">True</td> 
        			<td bgcolor="#eeeeee"><select name="showminutes" id="showminutes"> 
                    	<option value="true" selected>True</option> 
                    	<option value="false">False</option> 
                    	                    </select></td> 
        			</tr> 
        		<tr> 
        			<td bgcolor="#FFFFFF" class="red">minutedivisions</td> 
        			<td bgcolor="#FFFFFF">int</td> 
        			<td bgcolor="#FFFFFF">4</td> 
        			<td bgcolor="#FFFFFF"><select name="minutedivisions" id="minutedivisions"> 
                    	<option value="2">2</option> 
                    	<option value="3">3</option> 
                    	<option value="4" selected>4</option> 
                    	<option value="6">6</option> 
                    	<option value="7">7</option> 
                    	<option value="12">12</option> 
                    	</select></td> 
        		</tr> 
        		<tr> 
        			<td bgcolor="#eeeeee" class="red">military</td> 
        			<td bgcolor="#eeeeee">boolean</td> 
        			<td bgcolor="#eeeeee">False</td> 
        			<td bgcolor="#eeeeee"><select name="military" id="military"> 
        					<option value="true">True</option> 
        					<option value="false" selected>False</option> 
        					</select></td> 
        			</tr> 
        		<tr> 
        			<td bgcolor="#FFFFFF" class="red">event</td> 
        			<td bgcolor="#FFFFFF">string</td> 
        			<td bgcolor="#FFFFFF">'Click'</td> 
        			<td bgcolor="#FFFFFF"><select name="event" id="event"> 
        					<option value="focus">Focus</option> 
        					<option value="click" selected>Click</option> 
        					<option value="mouseover">Mouseover</option> 
        					</select></td> 
        			</tr> 
        		<tr bgcolor="#eeeeee"> 
        			<td class="red">layout</td> 
        			<td>string</td> 
        			<td>'vertical'</td> 
        			<td><select name="layout" id="layout"> 
        				<option value="vertical" selected>Vertical</option> 
        				<option value="horizontal">Horizontal</option> 
        				</select></td> 
        			</tr> 
        		<tr bgcolor="#eeeeee"> 
        			<td bgcolor="#ffffff" class="red">valuefield</td> 
        			<td bgcolor="#ffffff">string</td> 
        			<td bgcolor="#ffffff">Null</td> 
        			<td bgcolor="#ffffff">--</td> 
        			</tr> 
        		<tr bgcolor="#eeeeee"> 
        			<td bgcolor="#eeeeee" class="red">useBgiframe<br> 
        				(must include bgIframe plugin) </td> 
        			<td bgcolor="#eeeeee">boolean</td> 
        			<td bgcolor="#eeeeee">False</td> 
        			<td bgcolor="#eeeeee">--</td> 
        			</tr> 
        		<tr bgcolor="#eeeeee"> 
        			<td bgcolor="#FFFFFF" class="red">hoursopacity</td> 
        			<td bgcolor="#FFFFFF">float</td> 
        			<td bgcolor="#FFFFFF">1</td> 
        			<td bgcolor="#FFFFFF"><select name="hoursopacity" id="hoursopacity"> 
        					
        						<option value="0">0</option> 
        						
        						<option value="0.1">0.1</option> 
        						
        						<option value="0.2">0.2</option> 
        						
        						<option value="0.3">0.3</option> 
        						
        						<option value="0.4">0.4</option> 
        						
        						<option value="0.5">0.5</option> 
        						
        						<option value="0.6">0.6</option> 
        						
        						<option value="0.7">0.7</option> 
        						
        						<option value="0.8">0.8</option> 
        						
        						<option value="0.9">0.9</option> 
        						
        						<option value="1" selected>1</option> 
        						
       					</select></td> 
        			</tr> 
        		<tr bgcolor="#eeeeee"> 
        			<td bgcolor="#eeeeee" class="red">minutesopacity</td> 
        			<td bgcolor="#eeeeee">float</td> 
        			<td bgcolor="#eeeeee">1</td> 
        			<td bgcolor="#eeeeee"> 
						<select name="minutesopacity" id="minutesopacity"> 
						
							<option value="0">0</option> 
							
							<option value="0.1">0.1</option> 
							
							<option value="0.2">0.2</option> 
							
							<option value="0.3">0.3</option> 
							
							<option value="0.4">0.4</option> 
							
							<option value="0.5">0.5</option> 
							
							<option value="0.6">0.6</option> 
							
							<option value="0.7">0.7</option> 
							
							<option value="0.8">0.8</option> 
							
							<option value="0.9">0.9</option> 
							
							<option value="1" selected>1</option> 
							
						</select> 
					</td> 
        		</tr> 
        		<tr bgcolor="#eeeeee"> 
        			<td bgcolor="#cccccc">Argument 2<br> 
        				&quot;callback&quot; (function) </td> 
        			<td bgcolor="#ffffff"><br>        				</td> 
        			<td bgcolor="#ffffff">function<br> 
        				(gets passed back time value as string) </td> 
        			<td bgcolor="#ffffff">Null</td> 
        			<td bgcolor="#ffffff">--</td> 
        			</tr> 
        		</table> 
		    <br> 
		    <br> 
	    </td> 
	</tr> 
</table> 
<a name="download"></a> 
<div class="thinline"></div> 
<h2>Download</h2> 
<p><a href="pages/jquery/clockpick/1.2.5/jquery.clockpick.1.2.5.js">Download jquery.clockpick.1.2.5.js</a> (18K) <br> 
	<a href="pages/jquery/clockpick/1.2.5/jquery.clockpick.1.2.5.pack.js">Download jquery.clockpick.1.2.5.pack.js</a> (10K) <br> 
	<a href="pages/jquery/clockpick/1.2.5/jquery.clockpick.1.2.5.min.js">Download jquery.clockpick.1.2.5.min.js</a> (12K) <br> 
	<a href="pages/jquery/clockpick/1.2.5/clockpick.1.2.5.css">Download clockpick.1.2.5.css</a> (1K)<br> 
	<a href="pages/jquery/clockpick/1.2.5/jquery.clockpick.1.2.5.zip">Download jquery.clockpick.1.2.5.zip (Zip archive of above four files)</a> (8K)
</p> 
<p>Also you will of course need the jQuery library, if you don't already have it:<br> 
<a href="http://jquery.com">http://jquery.com</a></p> 
<p>If you are using ClockPick near a select menu, you will want to<br> 
	use the bgIframe plugin to combat the IE6 select menu show-through issue<br> 
	<a href="http://jquery.com/plugins/files/bgiframe-2.1.zip">Download bgIframe plugin (zip archive)<br> 
</a></p> 
<a name="config"></a> 
<div class="thinline"></div> 
<h2>Configuration</h2> 
<table width="640" border="0" cellpadding="6" cellspacing="1"> 
	<tr bgcolor="#f2f2f2"> 
		<td align="right" valign="top"><h3>Basic</h3></td> 
		<td><p>After including the jQuery script in your html &lt;head&gt; block, include the jquery.clockpick.js file like so:<br> 
			&lt;script src=&quot;path/to/jquery.clockpick.js&quot;&gt;&lt;/script&gt;<br> 
			<br> 
			Include the clockpick css file:<br> 
			&lt;link rel=&quot;stylesheet&quot; href=&quot;path/to/clockpick.css&quot; type=&quot;text/css&quot;&gt;</p> 
			<p>Then in your $(document).ready block, simply add the following bit of code:</p> 
			<p><strong>$(&quot;#clockpick&quot;).clockpick();</strong></p> 
		    <p>This assumes you are binding the plugin to an element with the id &quot;clockpick&quot;. You can certainly bind the plugin to any element that makes sense for your use. </p></td> 
	</tr> 
	<tr bgcolor="#dddddd"> 
		<td align="right" valign="top" bgcolor="#dddddd"><h3>Adding parameters</h3></td> 
		<td><p>ClockPick takes two optional parameters:<br> 
				<strong>options</strong> (hash) - an object containing settings keys and their values<br> 
			    <strong>callback</strong> (function) - a callback function to run after ClockPick is run</p> 
			<p>Example:</p> 
			<p><strong>$(&quot;#clockpick&quot;).clockpick({<br> 
				starthour : 6,<br> 
				endhour : 15,<br> 
				showminutes : false<br> 
				}, mycallback<br> 
				);
				</strong><br> 
			</p></td> 
	</tr> 
	<tr bgcolor="#f2f2f2"> 
		<td align="right" valign="top"><h3>Click target different <br> 
		than value field </h3></td> 
		<td><p>If you want to have the action on a different element than the time field, you would configure as below (like the &quot;click on clock&quot; demo).</p> 
			<p>Assuming the field you wish to have filled with the time, has the name 'myfieldname':</p> 
			<p><strong>$(&quot;.clockpick&quot;).clockpick({<br> 
			valuefield : 'myfieldname' <br> 
			});
			</strong><br> 
		</p></td> 
	</tr> 
	<tr bgcolor="#dddddd"> 
		<td align="right" valign="top"><h3>Using bgIframe plugin </h3></td> 
		<td><p>To account for the notorious IE6 select menu show-through issue, a popular jQuery plugin called <a href="http://jquery.com/plugins/files/bgiframe-2.1.zip">bgIframe</a> is frequently used. ClockPick offers support for this plugin by setting a configuration variable useBgiframe = true. By doing this, ClockPick calls the bgiFrame plugin at the right time so its divs are shown above any select menus that might be nearby.</p> 
			<p>First you will need to include the <a href="http://jquery.com/plugins/files/bgiframe-2.1.zip">bgIframe plugin</a>, somewhere afer your include of the jQuery library: <br> 
				<strong>&lt;script src=&quot;/path/to/bgiframeplugin.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt; </strong></p> 
			<p>Then set the configuration variable when you call ClockPick:<strong><br> 
	$(&quot;.clockpick&quot;).clockpick({<br> 
	useBgiframe : true <br> 
	}); </strong> </p></td> 
	</tr> 
</table> 
<br> 
<br> 
<a name="history"></a> 
<div class="thinline"></div> 
<h2>History</h2> 
<p class="big">Version 1.2.5, released February 14, 2009</p> 
<p>- Removed Safari hacks; newer versions of Safari (3.1+) are behaving more like FF and IE<br> 
	- removed [@name] reference, changed to [name]; @attr selectors obsolete in jQuery 1.3+ </p> 
<p>&nbsp;</p> 
<p class="big">Version 1.2.4, released July 15, 2008</p> 
<p>- Fixed &quot;event: focus&quot; bug with div placement<br> 
	- changed css styling </p> 
<p class="big">&nbsp;</p> 
<p class="big">Version 1.2.3, released April 19, 2008</p> 
<p>- Fixed small bug by adding display:none to containers in style sheet<br> 
- New styling<br> 
- Added support for variable opacity</p> 
<p>&nbsp; </p> 
<p class="big">Version 1.2.2, released February 20, 2008</p> 
<p>Fixed bug where plugin would fail on IE6 if Doctype was not declared.</p> 
<p>&nbsp;</p> 
<p class="big">Version 1.2.1, released November 20, 2007</p> 
<p>Fixed small issue with div placed incorrectly when control near bottom of viewport and scrolltop &gt; 0.</p> 
<p>&nbsp; </p> 
<p><span class="big">Version 1.2, released November 19, 2007</span></p> 
<p>Added native support for the bgIframe plugin.</p> 
<p>&nbsp; </p> 
<p class="big">Version 1.1, released September 25, 2007</p> 
<table width="400" border="0" cellpadding="1" cellspacing="1"> 
	<tr valign="top"> 
		<td>+</td> 
		<td>Added keyboard support. </td> 
		<td>&nbsp;</td> 
	</tr> 
	<tr valign="top"> 
		<td>+</td> 
		<td>Safari for Mac issues seem to be fixed. Please let me know if you experience any problems using Safari. </td> 
		<td>&nbsp;</td> 
	</tr> 
	<tr valign="top"> 
		<td>+</td> 
		<td>Fixed odd Firefox error referenced in Version 1.0. This is a known FF bug that has been around for a long time when using event.relatedTarget and the mouseout relatedTarget is an input field. Used a try/catch block as a workaround. More info: <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=208427" target="_blank">https://bugzilla.mozilla.org/show_bug.cgi?id=208427</a></td> 
		<td>&nbsp;</td> 
	</tr> 
</table> 
<p class="big">&nbsp; </p> 
<p class="big"><strong>Version 1.0, released July 12 2007.
</strong></p> 
<p>Known issues:</p> 
<table width="400" border="0" cellpadding="1" cellspacing="1"> 
	<tr valign="top"> 
		<td>+</td> 
		<td>Div rectifier not tested on field near right/left edge of viewport.</td> 
	    <td>&nbsp;</td> 
	</tr> 
	<tr valign="top"> 
		<td>+</td> 
		<td>Safari for Mac: time div appears well below input field in &quot;same field&quot; example. Working on a workaround, as clientY does not appear to return the proper result in Safari when clicking on an input field. </td> 
		<td>&nbsp;</td> 
	</tr> 
	<tr valign="top"> 
		<td>+</td> 
		<td>Odd Firefox Error: &quot;uncaught exception: Permission denied to <br> 
			get property HTMLDivElement.nodeName&quot; on mouseout from <br> 
			minutes div onto input field </td> 
	    <td>&nbsp;</td> 
	</tr> 
</table> 
<p>&nbsp;	</p> 
<a name="contact"></a> 
<div class="thinline"></div> 
<h2>Contact</h2> 
Questions, comments, suggestions: hit me up: joshnathanson at gmail dot com <br> 
 
<p>&nbsp; </p> 
<p>&nbsp; </p> 
<p>&nbsp; </p> 
 
</div> 
 
<div class="footer"> 
</div> 
 
</body> 
</html> 